<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/login.css">
</head>

<body>
    <header></header>
    <section id="login">
        <div class="banxin">
            <ul class="firul">
                <li class="active">登录</li>
                <i></i>
                <li>
                    <a href="register.html">注册</a>
                </li>
            </ul>
            <div class="tableContent">
                <span id="msg"></span>
                <dl class="login actived parent">
                    <div class="left">
                        <ul class="loginTable">
                            <li class="active">验证码登录</li>
                            <li>账号密码登录</li>
                        </ul>
                        <div class="loginTableContent">
                            <!-- 验证码登录 -->
                            <dl class="activedd">
                                <dd>
                                    <input autocomplete="off" class="code_tel" maxlength="11" name="username"
                                        onkeyup="value=value.replace(/[^\d]/g,'')" placeholder="手机号码" type="tel" />
                                </dd>
                                <dd>
                                    <input autocomplete="off" class="picCode" maxlength="4" placeholder="请输入验证码"
                                        type="text" />
                                    <div class="picCodeImg"> </div>
                                    <div class="changePicCode">
                                        <p>看不清？</p>
                                        <p>换一张</p>
                                    </div>
                                </dd>
                                <dd>
                                    <input autocomplete="off" class="telCode" maxlength="4" placeholder="短信验证码"
                                        type="text" />
                                    <button class="telCodeBtn">发送验证码</button>
                                    <!-- <button class="telCodeBtn2" style="display: none">发送验证码</button> -->
                                </dd>
                                <button class="login_code" id="login_code">登录</button>
                            </dl>
                            <!-- 账号登陆 -->
                            <dl class="activeddd" style="display: none;">
                                <dd>
                                    <input autocomplete="off" class="userId" name="username" placeholder="请输入手机账号" type="text" />
                                </dd>
                                <dd>
                                    <input autocomplete="new-password" class="password" name="userpass" placeholder="请输入密码"
                                        type="password" />
                                </dd>
                                <dd>
                                    <input class="telCode1" maxlength="4" placeholder="短信验证码" type="text" />
                                    <button class="telCodeBtn1">发送验证码</button>
                                    <!-- <button class="telCodeBtn2" style="display: none">发送验证码</button> -->
                                </dd>
                                <!-- <dd>
                                    <a class="forget" href="./forget.html">忘记密码？</a>
                                </dd> -->
                                <button class="login_userId" id="login_userId">登录</button>
                            </dl>
                        </div>
                        <!-- 其他方式登录 -->
                        <!-- <p class="otherWay">
                            <span>使用第三方账号登录</span>
                             <a class="other qq"></a> -->
                        <!-- <a class="other alipay"></a> -->
                        <!-- </p>
                        <p class="errMsg">错误信息</p> -->
                    </div>
                    <div class="center"></div>
                    <div class="right">
                        <span>注册自然堂账户</span>
                        <p>注册自然堂账号以便追踪您的订单，管理收货地址， 获取更多个性化信息</p>
                        <a href="./register.html"> 创建账户 </a>
                        <div id="telyzm">
                            <img src="img/index/sjyzm.png" alt="">
                        </div>
                    </div>

                </dl>
            </div>



        </div>
    </section>
    <footer></footer>
</body>

</html>
<script src="js/jQuery.js"></script>
<script src="js/cookieTools.js" type="text/javascript" charset="utf-8"></script>
<script src="js/login.js"></script>

<script type="text/javascript">

if(getCookie("vipName")!=""){
	alert("您已成功登录");
}
//账号登陆 
let flagna, flagpa, flagtelZ;
	//验证码登录的手机号正则
	$(".userId").blur(function () {
	    var regID = /^\d{11}$/;
	    if (regID.test(this.value)) {
	        $("#msg").css({
	            display: "none"
	        });
	        flagna = 1;
	    } else {
	        $("#msg").css({
	            display: "block"
	        });
	        $("#msg").html("手机号格式不对");
	        flagna = 0;
	    }
	})
	//密码
	$(".password").blur(function () {
	    if (this.value=="") {
			$("#msg").css({
			    display: "block"
			});
			$("#msg").html("请输入密码");
			flagpa = 0;
	     
	    } else {
			$("#msg").css({
			    display: "none"
			});
			flagpa = 1;
	       
	    }
	})
	//点击发送短信验证码
	$(".telCodeBtn1").click(function () {
	    $("#telyzm").css({
	        display: "block"
	    })
	})
	$(".telCode1").blur(function () {
	    if ($(this).val() == 5891) {
	        $("#telyzm").css({
	            display: "none"
	        });
	        $("#msg").css({
	            display: "none"
	        });
	        flagtelZ = 1;
	    } else {
	        $("#msg").css({
	            display: "block"
	        });
	        $("#msg").html("输入错误，请重新输入");
	        flagtelZ = 0;
	    }
	
	})
	
	$("#login_userId").click(function () {
		let usern=$(".userId").val();
		let userp=$(".password").val();
	    if (flagna&&flagpa&&flagtelZ) {
		let xhr = new XMLHttpRequest();
		  xhr.open("post", "php/login.php", true);
		  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		  xhr.send("username="+usern+"&userpass="+userp);
		  xhr.onreadystatechange = function () {
		      if (xhr.status == 200 && xhr.readyState == 4) {
		          fun(xhr.responseText);
		      }
		  }
		  function fun(resText) {
		      if (resText == "success") {
		       					$("#msg").css({
		       					    display: "block"
		       					});
		          $("#msg").html("登录成功");
				   setCookie("vipName",usern,1);
				  window.location ="index.html";
		       
		      } else {
		       					$("#msg").css({
		       					    display: "block"
		       					});
		          $("#msg").html("登录失败");
		      }
		  }
	    }
	    else {
	    }
	})
	
	
</script>